<template>
    <div class="appealAgainst">
        <header-cont :page="'login'"></header-cont>
        <div class="section">
            <div class="sec_right">
                <div class="newarea-right-title">
                    <b>{{ $route.meta.title }}</b>
                    <p></p>
                </div>
                <div class="content">
                    <div class="table-page-wrapper">
                        <a-table :columns="columns" :data-source="data">
                            <template slot="appealStatus" slot-scope="text">
                                <div>
                                    <span>{{ text === 1 ? '已申诉' : '未申诉' }}</span>
                                    <a-divider type="vertical" />
                                    <a-button @click="handleViewFeedback" type="link" :disabled="text===0 ? true : false" style="padding:0;">查看反馈</a-button>
                                </div>
                            </template>
                            <template slot="appealOperation" slot-scope="text"> 
                                <div>
                                    <a href="javascript:;" @click="handleAppeal">申诉</a>
                                    <a-divider type="vertical" />
                                    <a href="javascript:;" style="color: #FF5500;">撤回</a>
                                </div>
                            </template>
                        </a-table>
                    </div>
                </div>
            </div>
        </div>
        <footer-cont></footer-cont>
        <appealComp :showFlag="showFlagAppeal" />
        <viewFeedback :showFlag="showFlagFeedback" />
    </div>
</template>

<script>
import headerCont from '@/views/declarationSystem/common/header';
import footerCont from '@/views/declarationSystem/common/footer';
import appealComp from './components/appeal'
import viewFeedback from './components/viewFeedback.vue';
const columns = [
    {
        title: '序号',
        width: 65,
        customRender:function (t,r,index) {
            return parseInt(index)+1;
        }
    },
    {
        title: '成果编号',
        dataIndex: 'name',
        width: 110
    },
    {
        title: '成果名称',
        dataIndex: 'age',
        width: 110
    },
    {
        title: '成果类别',
        dataIndex: 'name1',
        width: 110
    },
    {
        title: '申报单位',
        dataIndex: 'age1',
        width: 110
    },
    {
        title: '完成人',
        dataIndex: 'address',
        width: 110
    },
    {
        title: '申诉状态',
        dataIndex: 'status',
        key: 'status',
        width: 130,
        scopedSlots: {
            customRender: 'appealStatus'
        }
    },
    {
        title: '申诉',
        width: 110,
        scopedSlots: {
            customRender: 'appealOperation'
        }
    },
];

const data = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        name1: 'John Brown',
        age1: 32,
        address: 'New York',
        status: 1,
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        name1: 'John Brown',
        age1: 32,
        address: 'New York',
        status: 1,
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        name1: 'John Brown',
        age1: 32,
        address: 'New York',
        status: 0,
    },
];
export default {
    components: {
        headerCont,
        footerCont,
        appealComp,
        viewFeedback
    },
    data() {
        return {
            queryParam: {},
            data,
            columns,
            showFlagAppeal: false,
            showFlagFeedback: false,
        }
    },
    mounted() {
    },
    methods: {
        handleViewFeedback() {
            this.showFlagFeedback = !this.showFlagFeedback;
        },
        handleAppeal() {
            this.showFlagAppeal = !this.showFlagAppeal;
        },
    },
}
</script>
<style lang="less" scoped>
.appealAgainst {
    width: 100%;
    background: #F7F7F7;
}

.section {
    position: relative;
    width: 1200px;
    height: 690px;
    margin: 2px auto 0;
    display: flex;
    background: #fff;
    margin-top: 30px;

    .sec_right {
        position: relative;
        flex: 1;
        height: 100%;
        background: #FFFFFF;
        overflow: hidden;
        overflow-y: scroll;
    }
}


.sec_right {
    padding: 0 18px 30px 33px;

    .newarea-right-title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        letter-spacing: 1px;
        border-bottom: 2px solid #2d8cf0;
        margin: 20px 0;
        display: flex;
        justify-content: space-between;

        b {
            font-weight: normal;
            font-size: 21px;
            font-weight: bold;
            color: #333;
        }

        p {
            height: 50px;
            display: flex;
            align-items: center;

            a {
                &:hover {
                    span {
                        color: #2d8cf0;
                        font-size: 14px;
                    }

                    i {
                        color: #2d8cf0;
                    }
                }

                span {
                    color: #999;
                    font-size: 14px;
                    margin-right: 5px;
                }

                i {
                    color: #999;
                }
            }

            &>i {
                font-style: normal;
                margin: 0 10px;
                color: #999;
            }

            &>span {
                color: #666;
                font-size: 14px;
            }
        }
    }
}
</style>
